关于
Sass是一种CSS辅助工具,在CSS语法基础上增加了变量、嵌套、混合、导入等功能,使得开发更加高效。
嵌套 在{}内写样式,内层样式以外层选择器为父选择器
$ 引用父选择器
属性嵌套 允许使用属性命名空间
注释 允许多行注释/* */、单行注释//,前者会输出到编译后的文件中,后者不会
SassScript 允许常规JS操作,包括变量$var、常规运算等
插值语句 #{ },直接引用变量
变量定义 !default,给变量添加保护赋值
引入 @import,引入Sass或Scss文件为导入,其它为普通引用CSS语句
分音 在Scss或Sass文件名前加下划线,引入语句不变,则引入文件不会编译
继承 @extend,引用其它样式
占位符 @extend %var,定义样式,只能用来继承,不会参与编译
声明 !optional,为引用或继承的选择器添加保护
控制指令 允许使用JS中基础的控制指令,包括@if、@for $var from <start> through <end>(包含始终)、@for $var from <start> to <end>、@each $var in <list>、@while等
混合指令 在@mixin后添加名称和样式,使用$incllude引用混合样式,可运用参数,引用时参数写法可为key: value形式,@mixin可以用=表示,@incllude可以用+表示
函数 允许使用JS中简单函数操作,包括@function funcname、@return result等
输出格式 用:style option命令选项来设置输出格式,:nested,默认格式,缩进、嵌套与Sass一致;:expanded,与手写格式相似,无嵌套、缩进;:compact,每条规则只占一行;:compressed,在:expanded基础上删除无意义的空格、空白、注释,压缩为最小